﻿<MudPaper Elevation="4" Class="pa-4">
    <div class="d-flex flex-row">
        <MudAvatar Size="Size.Large" Class="mud-elevation-4">
            <MudImage Src="@Member.Avatar" />
        </MudAvatar>
        <div class="d-flex flex-column flex-grow-1 px-5 my-2">
            <MudText Typo="Typo.body1" Style="font-weight:500;">@Member.Name</MudText>
            <MudText Typo="Typo.body2">@Member.GitHub</MudText>
        </div>
        <div class="d-flex flex-sm-column-reverse flex-md-row align-baseline justify-end me-n2 mt-n2">
            @if(Member.LinkedIn != null)
            {
                <MudTooltip Text="LinkedIn" Placement="Placement.Top" Class="d-flex">
                    <MudIconButton Icon="@Icons.Custom.Brands.LinkedIn" Href="@Member.LinkedIn" Color="Color.Primary" Target="_blank" Edge="Edge.End" />
                </MudTooltip>
            }
            <MudTooltip Text="GitHub" Placement="Placement.Top" Class="d-flex">
                <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Href="@("https://github.com/"+Member.GitHub)" Color="Color.Inherit" Target="_blank" />
            </MudTooltip>
        </div>
    </div>
    <div class="d-flex flex-column mt-5">
        <div class="d-flex flex-row align-center">
            <MudIcon Icon="@Icons.Material.Filled.Place" Color="Color.Inherit" Class="ms-4" />
            <MudText Typo="Typo.body2" Class="ps-9">@Member.From</MudText>
        </div>
    </div>
</MudPaper>

@code {
    [Parameter] public TeamMember Member { get; set; }
}
